<template>
  <BasicModal 
    v-bind="$attrs" 
    destroyOnClose 
    :title="title" 
    :width="540" 
    @register="registerModal" 
    @ok="handleSubmit">
    <div class="pa-4">
      <a-form ref="formRef" :model="formModel" :rules="validatorRules" layout="vertical">
        <a-form-item label="原因" labelAlign="left" v-bind="validateInfos.reason">
          <a-textarea style="height:100px;" v-model:value="formModel.reason" placeholder="请输入不通过原因" />
        </a-form-item>
      </a-form>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, reactive, unref } from 'vue';
  import { Form, Modal } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/src/components/Modal';
  import { BasicForm, useForm } from '/src/components/Form';
  // Emits声明
  const emit = defineEmits(['register','success']);
  const formModel = ref({
    reason: '',
  });
  const validatorRules = reactive({
    reason: [
      { required: true, message: '请输入不通过原因' },
    ],
  });
  //设置标题
  const title = ref('不通过原因');

  //表单配置
  const useForm = Form.useForm;
  const { resetFields, validate, validateInfos, clearValidate } = useForm(formModel.value, validatorRules, { immediate: false });

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
  });

  async function handleSubmit() {
    await validate();
    //提交表单
    emit('success', formModel.value);
    //关闭弹窗
    closeModal();
  }
</script>
